<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb style="padding-left: 10px;padding-bottom: 10px;font-size: 14px" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>出库记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用户列表卡片-->
    <el-card shadow="never">
      <!--表单分为左右两边放数据:inline="true"-->
      <!--顶部搜索框-->
      <el-form label-width="70px" :inline="true" ref="form" :model="form">
        <el-form-item label="发放单号">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="发放类型">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发放状态">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>重置</el-button>
          <el-button type="success" @click="stocks">发放</el-button>
        </el-form-item>
      </el-form>
       <!--主页面显示数据  表格-->
      <el-table
        :data="tableData"
        border
        style="width: 100%;height: 400px">
        <el-table-column
          fixed
          prop="id"
          label="#"
          width="50">
        </el-table-column>
        <el-table-column
          prop="type"
          label="发放类型"
          width="120">
          <template slot-scope="scope">
            <el-tag  effect="plain" size="mini"  type="success" v-if="scope.row.type==0">政府领取</el-tag>
            <el-tag  effect="plain" size="mini" type="danger"  v-else-if="scope.row.type==1">医院领取</el-tag>
            <el-tag  effect="plain" size="mini"  type="warning"  v-else-if="scope.row.type==2">小区领取</el-tag>
            <el-tag  effect="plain" size="mini"  type="info"  v-else-if="scope.row.type==3">个人领取</el-tag>
            <el-tag  effect="plain" size="mini"   v-else-if="scope.row.type==4">其他领取</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="urgency"
          label="紧急程度"
          width="170">
          <!-- 紧急程度:1:不急,2:常规,3:紧急4:特急-->
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.urgency"
              :texts="['不急','常规','紧急','特急']"
              show-text>
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="发放地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="120">
          <!--state状态:0:正常入库,1:已进入回收,2:等待审核-->
          <template slot-scope="scope">
            <el-tag  effect="plain" size="mini"  type="success" v-if="scope.row.state==0">已发</el-tag>
            <el-tag  effect="plain" size="mini" type="danger"  v-else-if="scope.row.state==1">回收</el-tag>
            <el-tag  effect="plain" size="mini"  type="warning"  v-else-if="scope.row.state==2">审核中</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="province"
          label="操作员"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="发放时间"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              <i class="el-icon-view"></i>
              <span @click="dialogVisible = true">明细</span>
            </el-button>
            <el-button type="text" size="small">
              <i class="el-icon-s-operation"></i>
              <span>
                <el-popconfirm
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="这是一段内容确定移入回收站吗？">
                   <span slot="reference">回收站</span>
                </el-popconfirm>
              </span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
       <!--分页-->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[4, 5, 6]"
        :page-size="4"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
       <!--点击 明细 弹框-->
      <el-dialog
        title="发放明细"
        :visible.sync="dialogVisible"
        width="55%">
        <el-card shadow="never">
          <div  class="text item">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">省区市:</span> &nbsp;<el-tag size="mini" >湖南</el-tag>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">具体位置:</span> &nbsp;<el-tag size="mini" >长沙</el-tag>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">联系人 :</span> &nbsp;<el-tag size="mini"  >老郭</el-tag>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">电话 : </span>&nbsp;<el-tag size="mini" >12345678945</el-tag>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
         <!--步骤条-->
        <el-steps :active="1" v-if="detail==1" finish-status="success" simple style="margin-bottom: 5px;align-items: center" >
          <el-step title="提交发放单" ></el-step>
          <el-step title="审核发放单" ></el-step>
          <el-step title="成功发放" ></el-step>
        </el-steps>
        <el-steps :active="2" v-if="detail==2" finish-status="success" simple style="margin-bottom: 5px;align-items: center" >
          <el-step title="提交发放单" ></el-step>
          <el-step title="审核发放单" ></el-step>
          <el-step title="成功发放" ></el-step>
        </el-steps>
        <el-steps :active="3" v-if="detail==3" finish-status="success" simple style="margin-bottom: 5px;align-items: center" >
          <el-step title="提交发放单" ></el-step>
          <el-step title="审核发放单" ></el-step>
          <el-step title="成功发放" ></el-step>
        </el-steps>
        <!--表格-->
        <el-table
          :data="tableData2"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
         <!--分页-->
        <el-pagination
          style="padding-top: 15px"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="current1"
          :page-sizes="[2, 3, 4]"
          :page-size="pageSize1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1">
        </el-pagination>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OutStocks',
  methods: {
    handleClick (row) {
      console.log(row)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    onSubmit () {
      console.log('submit!')
    },
    handleSizeChange1 (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange1 (val) {
      console.log(`当前页: ${val}`)
    },
    stocks(){
      this.$router.push("/OutStocks/publishStocks");
    }
  },
  data () {
    return {
      // 弹框
      dialogVisible: false,
      // 步骤条进度
      detail: 2,
      // 当前页码
      current: 1,
      // 总条数
      total: 30,
      // 每页显示条数
      pageSize: 4,
      // 弹框的当前页码
      current1: 1,
      // 弹框的总条数
      total1: 30,
      // 弹框的每页显示条数
      pageSize1: 4,
      // form表单
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tableData2: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      // 主页面显示表格数据
      tableData: [{
        id: 1,
        date: '2016-05-08',
        type: 0,
        province: '上海',
        urgency: 1,
        address: '上海市普陀区金沙江路 1518 弄',
        state: 0
      }, {
        id: 2,
        date: '2016-05-08',
        type: 1,
        province: '上海',
        urgency: 2,
        address: '上海市普陀区金沙江路 1517 弄',
        state: 2
      }, {
        id: 3,
        date: '2016-05-08',
        type: 2,
        province: '上海',
        urgency: 3,
        address: '上海市普陀区金沙江路 1519 弄',
        state: 1
      }, {
        id: 4,
        date: '2016-05-08',
        type: 3,
        province: '上海',
        urgency: 4,
        address: '上海市普陀区金沙江路 1516 弄',
        state: 1
      }, {
        id: 5,
        date: '5',
        type: 2,
        province: '上海',
        urgency: 2,
        address: '上海市普陀区金沙江路 1516 弄',
        state: 0
      }]
    }
  }
}
</script>

<style scoped>

</style>
